<template>
    <!-- 资产报修 -->
    <div class="center">
        <div class="container">
            <el-table :data="form.lists" border class="table" ref="multipleTable" header-cell-class-name="table-header">
                <el-table-column type="index" label="区域编码" width="100" align='center'>
                    <template slot-scope="scope">
                        {{ scope.$index + (query.pageIndex - 1) * query.pageSize + 1 }}
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="区域名称" align='center'></el-table-column>
                <el-table-column prop="num" label="资产数量" align='center'></el-table-column>
                <el-table-column prop="value" label="金额" align='center'></el-table-column>

            </el-table>
            <div class="bot">
                <div class="bot_item"> <span>资产总数:</span> <span>{{ form.totalNum }}</span></div>
                <div class="bot_item"> <span>总金额:</span> <span>{{ form.totalValue }}</span></div>

            </div>

        </div>
    </div>
</template>

<script>
import { getCountPlace } from '../../../api/index'

export default {

    data() {
        return {
            form: {},
            query: {
                pageIndex: 1,
                pageSize: 15,
            },
        };
    },
    components: {
    },
    mounted() {
        this.getCountPlaces()
    },
    methods: {
        async getCountPlaces() {
            const data = await getCountPlace()
            this.form = data.data.data
        }
    }
};
</script>

<style scoped>
.table {
    width: 100%;
    overflow: auto;
    font-size: 14px;
}

.center {
    height: calc(100% - 20px);
}

.bot {
    display: flex;
    align-items: center;
    justify-content: end;
    height: 40px;
    background-color: rgba(172, 172, 172, 0.151);

}

.bot_item {
    border-right: 1px solid #bebdbd;
    width: 15%;
    text-align: center;
}

.bot :last-child {
    border: 0;
}

.container {
    height: 90%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
</style>
